<template>
  <div class="cart">
    <el-table :data="cartGoods" v-if="cartGoods.length>0" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="cart-name-img">
            <img :src="scope.row.goodsImg" alt="">
            <span>{{scope.row.goodsname}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.price}}元</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="数量" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.num" :step="1" :min="1" :max="99" step-strictly></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="goodsname" label="小计" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.num * scope.row.price}}元</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="el-icon-close" @click="deleteGoods(scope.row)"></span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 结算栏 -->
    <div class="jiesuan" v-if="cartGoods.length>0">
      <div class="jiesuan-left">
        <span @click="toIndex" class="continu-shop">继续购物</span>
        <span>|</span>
        <span>共 <em>{{allGoods}}</em> 件商品，已选择 <em>{{checkGoods}}</em> 件</span>
      </div>
      <div class="jiesuan-right">
        <span>合计: <em> {{allPrice}}元</em></span>
        <div class="to-jiesuan" @click="tojiesuan">去结算</div>
      </div>
    </div>
    <div v-else style="text-align:center" @click="toIndex">还没有加入商品，快去加入商品吧！</div>
  </div>
</template>
<script>
import api from '@/api/commonIndex/index'
export default {
  computed: {
    cartGoods(){
      return this.$store.getters.cartGoods
    },
    user(){
      return this.$store.getters.user
    },
    // 所有商品
    allGoods(){
      let all = 0
      this.cartGoods.map(item=>{
        all += parseInt(item.num)
      })
      return all
    },
    // 选中商品
    checkGoods(){
      let checked = 0
      this.multipleSelection.map(item=>{
        checked += parseInt(item.num)
      })
      return checked
    },
    // 价格
    allPrice(){
      let price = 0
      this.multipleSelection.map(item=>{
        price += parseFloat(item.num * item.price)
      })
      return price
    },
  },
  data() {
    return {
      // 表格多选
      multipleSelection:[],
    }
  },
  methods: {
    // 删除商品
    deleteGoods(item){
      let temp = JSON.parse(JSON.stringify(item))
      this.$store.dispatch('clearCart',temp)
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 结算
    tojiesuan(){
      // 没选中
      if(this.multipleSelection.length<1){
       this.$message.warning('请选择购买的商品!')
       return
      }
      // 确认
      this.$confirm('确认提交订单吗?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.multipleSelection.map(item=>{
          api.buyGoods({
            totalPrice:this.allPrice,
            userID:this.user.id,
            goodsID:item._id,
            buyNum:item.num
          }).then(res=>{
            if(res.code !==200 ) return
            console.log(res)
            this.$message.success('购买成功!')
            // 清空
            this.$store.dispatch('clearCart',item)
          })
        })
      }).catch(() => {
                  
      });
      
    },
    // 继续购物
    toIndex(){
      this.$router.push('/common/index')
    }
  },
  created() {
    
  },
  mounted() {
  },
}
</script>
<style lang="less" scoped>
.cart{
  overflow: hidden;
  width: 1200px;
  margin: 20px auto;
  background-color: #fff;
  .cart-name-img{
    img{
      height: 60px;
      width: 60px;
      vertical-align: middle;
      margin-right: 15px;
    }
  }
  // 关闭按钮
  /deep/ .el-icon-close{
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: #757575;
    transition: all ease .3s;
    &:hover{
      background-color: #00e28b;
      color: #fff;
    } 
  }
  // 结算栏
  .jiesuan{
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    color: #909399;
    padding: 0px 15px;
    border-top: 10px solid #f5f5f5;
    em{
      color: #d44d44;
    }
    .jiesuan-left{
      width: 60%;
      span{
        margin-right: 10px;
      }
      .continu-shop{
        cursor: pointer;
        &:hover{
          color: #00e28b;
        }
      }
    }
    .jiesuan-right{
      width: 39%;
      display: flex;
      justify-content:flex-end;
      span{
        em{
          font-size: 24px;
        }
      }
      .to-jiesuan{
        margin-left: 10px;
        padding: 0px 1px;
        background-color: #00e28b;
        text-align: center;
        width: 100px;
        height: 100%;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  // 选择框样式
  /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #00e28b;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #00e28b;
    border-color: #00e28b; 
  }
  /deep/ .el-checkbox__inner:hover {
    border-color: #00e28b;
  }
  /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #00e28b;
  }
  // 覆盖表格样式
  /deep/ .el-table{
    border: 0px !important;
    th{
      background-color: #fff !important;
      height: 70px !important;
    }
    th>.cell {
      padding-left: 14px !important;
    }
    .el-table__header {
      background-color: #fff !important;
      padding-left: 0px !important;
    }
    th,td{
      border-right: 0px !important;
    }
    .el-table__row{
      height: 100px;
    }
  }
  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #fff !important;
  }
  /deep/ .el-table__body-wrapper{
    max-height: 100%;
    overflow-y: auto !important;
  }
  // 技术框
  /deep/ .el-input-number__decrease:hover, /deep/ .el-input-number__increase:hover {
    color: #00e28b;
  }
  /deep/ .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), /deep/ .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
    border-color: #00e28b;
  }
}
</style>